<script setup lang="ts">
import { data } from '../data'

const props = defineProps<{
    type: string
}>()
const emit = defineEmits<{
    (event: "select", type: string): void
}>()
</script>

<template>
    <div class="p-4 h-full">
        <div class="h-full flex flex-col overflow-y-scroll text-left bg-gray-100">
            <div
                class="hover:bg-white p-2"
                v-for="({ type }) in data"
                :class="{
                    'bg-white': props.type === type
                }"
                @click="emit('select', type)"
            >{{ type }}</div>
        </div>
    </div>
</template>
